<template>
    <div class="luxury">
        <div v-for="item in luxuryList" :key="item.itemid" class="bodyimg">
            <img :src="item.image_url_set.main['800']" alt="">
            <div class="info">
                <div class="info-title-time">
                    <h4>{{item.title}}</h4>
                    <p>仅剩<span class="time">{{(item.end_time - item.start_time) | getTimes }}</span></p>
                </div>
                <div class="brand-img">
                    <img :src="item.image_url_set.brand['320']" alt="">
                </div>
            </div>
            <div class="discount">
                <p>{{item.discount_string}}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            luxuryList: []
        }
    },
    mounted () {
        this.axios({
            url: '/api2/luxury/ajaxList?page=1&card_id=1837',
            method: 'get'
        }).then(res=>{
            console.log(res.data);
            this.luxuryList = res.data.item_list
        })
    }
}
</script>
<style lang="scss" scoped>
.luxury{
    .bodyimg{
        width: 100%;
        position: relative;
        // z-index: 9;
        img{
            width: 100%;
            // height: 187.5px;
        }
        .info{
            width: 100%;
            height: 65px;
            background-color: #fff;
            .info-title-time{
                margin-left: 20px;
                margin-top: 10px;
                float: left;
                h4{
                    color: #333;
                    font-size: 14px;
                    font-weight: 400;
                    margin-bottom: 8px;
                }
                p{
                    color: #999;
                    vertical-align: middle;
                    font-size: 12px;
                }
            }
            .brand-img{
                width: 20%;
                float: right;
                margin: 16px 20px 0 0;
                img{
                    width: 100%;
                }
            }
        }
        .discount{
            position: absolute;
            top: 150px;
            background-color:rgba($color: #000000, $alpha: .8);
            color: #fff;
            padding: 2px 5px;
        }
    }
}
</style>
